<template>
    <uni-popup class="van-overlay" ref="popup" :type="position" @change="handleChange">
    	<slot></slot>
    </uni-popup>
</template>

<script>
import { parse, stringify } from '@/assets/js/util'
export default {
    model: {
        prop: 'checked',
        event: 'change'
    },
    data(){
        return {
        }
    },
	watch: {
		checked(val) {
			if (val) {
				this.open()
			} else {
				this.closed()
			}
		},
		show(val) {
			if (val) {
				this.open()
			} else {
				this.closed()
			}
		}
	},
    props: {
        checked: {
            type: Boolean,
            default: false
        },
		show: {
            type: Boolean,
            default: false
        },
		position: {
            type: String,
            default: 'center'
        }
    },
    methods: {
		handleChange({show, type}) {
			this.$emit('change', show)
			if (!show) {
				this.$emit('click')
			}
		},
		open() {
			this.$refs.popup && this.$refs.popup.open()
		},
		closed() {
			this.$emit('closed')
			this.$refs.popup && this.$refs.popup.close()
		}
    }
}
</script>

<style lang="scss" scoped>
    .uni-popup {
		z-index: 9999;
      :deep(.uni-popup__wrapper){
			background-color: #fff !important;
			border-radius: 16px 16px 0 0;
			max-height: 88vh;
			overflow-y: auto;
		}
    }
</style>